import React, {useEffect, useState} from 'react';
import {Button, Form, Input, message, Select} from "antd";
import FormLayout from "@/assets/components/formLayout";
import {modulesUrl} from "@/assets/constant/modulesUrl";
import {ProFormText, ProFormTextArea} from "@ant-design/pro-form";
import {useRequest} from "@@/plugin-request/request";
import {listForSelect} from "@/assets/service/baseService";
import Search from "antd/es/input/Search";
import {Source} from "@/pages/report/SourceList/data";
import {testSource} from "@/pages/report/SourceList/service";
import {dictType} from "@/assets/constant/dictType";
import {hooksSet} from "@/assets/utils/utils";

const SourceForm: React.FC<{}> = (props) => {

  // @ts-ignore
  const id = props.match.params.id;
  const [form] = Form.useForm();

  /**
   * 连接类型字典列表
   * @type 字典类型
   */
  const [typeDictList, setTypeDictList] = useState();
  useRequest(() => listForSelect(modulesUrl.sysDict, {type:dictType.SOURCE_TYPE}), {
    onSuccess: (result, params) => {
      hooksSet(setTypeDictList, result)
    }
  })

  /**
   * 数据库类型字典列表
   * @type 字典类型
   */
  const [databaseTypeDictList, setDatabaseTypeDictList] = useState();
  useRequest(() => listForSelect(modulesUrl.sysDict, {type:dictType.SOURCE_DATABASE_TYPE}), {
    onSuccess: (result, params) => {
      hooksSet(setDatabaseTypeDictList, result)
    }
  })

  /**
   * 测试数据源连接
   * @param url
   */
  const handleTestSource = async (fields: Source) => {
    const hide = message.loading('正在连接');
    form.validateFields().then(async () => {
      await testSource({...fields});
      hide();
      message.success('连接成功');
      return true;
    }).catch(() => {
      hide();
    })
  }

  useEffect(() => {

  }, []);

  return (
    <FormLayout
      id={id}
      title={"数据源"}
      form={form}
      moduleUrl={modulesUrl.reportSource}
    >
      <ProFormText key="name" name="name" label="名称" placeholder="请输入名称"
                   rules={[{required: true, message: '名称为必填项',}]}/>
      <Form.Item key={"type"} name={"type"} label={"类型"}
                 rules={[{required: true, message: '类型为必选项',}]}>
        <Select showSearch placeholder={"请选择类型"} optionFilterProp={"label"} options={typeDictList}/>
      </Form.Item>
      <Form.Item key={"databaseType"} name={"databaseType"} label={"数据库"}
                 rules={[{required: true, message: '数据库为必选项',}]}>
        <Select showSearch placeholder={"请选择数据库"} optionFilterProp={"label"} options={databaseTypeDictList}/>
      </Form.Item>
      <ProFormText key="databaseUsername" name="databaseUsername" label="用户名" placeholder="请输入用户名"/>
      <Form.Item key={"databasePassword"} name={"databasePassword"} label={"密码"}><Input.Password
        // @ts-ignore
        placeholder={"请输入密码"} autocomplete="new-password"/>
      </Form.Item>
      <Form.Item key={"databaseUrl"} name={"databaseUrl"} label={"数据库连接"}
                 rules={[{required: true, message: '数据库Url为必填项',},]}>
        <Search placeholder="请输入url" enterButton={<Button type="primary">测试连接</Button>}
                onSearch={() => handleTestSource(form.getFieldsValue())}/>
      </Form.Item>
      <ProFormTextArea key="textarea" name="textarea" label="描述" placeholder="请输入描述"/>
    </FormLayout>
  );
};

export default SourceForm;
